<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/Register.css">
</head>
<body>
<!-- 导航栏、左侧用户信息区域、右侧博客列表区域 -->
<!-- 导航栏 -->
<div class="nav">
    <!-- logo -->
    <img src="./img/charcoal.jpg" alt="logo">
    <!-- 标题 -->
    <span class="head">在线OJ</span>
    <!-- 空白占位符 -->
    <span class="spacer">欢迎来到在线OJ</span>
</div>
<!-- 注册页面的页面容器 -->
<div class="Register-container">
    <div class="Register-dialog">
            <h2>注 册</h2>
            <div class="row">
                <span>请输入账号:</span>
                <input type="text" id="username" name="username" placeholder="账号不能有中文">
            </div>
            <div class="row">
                <span>请设置密码:</span>
                <input type="password" id="password" name="password" placeholder="密码不能有中文">
            </div>
            <div class="row">
                <span>确认密码:</span>
                <input type="password" id="SurePassword" name="SurePassword" placeholder="请确认登录密码">
            </div>



            <div class="row">
                <a href="login.html">已有账号？去登录</a>
            </div>
            <div class="row">
                <input type="button" value="提交" id="submit" name="submit">
            </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script >

    let username = document.querySelector("#username");
    let password1 = document.querySelector("#password");
    let password2 = document.querySelector("#SurePassword");
    let button2 = document.querySelector("#submit");


    button2.onclick = function(){
        let res = isRightMessage();
        if(res == true){
        //发起ajax和后端进行交互
        jQuery.getJSON("user/register",
        {
            "username":jQuery.trim(username.value),
            "passwordA":jQuery.trim(password1.value),
            "passwordB":jQuery.trim(password2.value)
        },
        function(result){
            if(result.code == 200 && result.data == true){
                //alert(data.message);
                location.assign('login.html');
            }else{
                alert("注册失败，请检查两次密码是否相同");
            }
        }
        )

    }
}
//校验输入框当中的内容格式是否正确
    function isRightMessage(){
        if(username.value == null || username.value == ""){
            alert("请输入账号");
            username.focus();
            return false;
        }
        if(password1.value == ""){
            alert("请输入密码");
            password1.focus();
            return false;
        }
        if(password2.value == ""){
            alert("请输入确认密码");
            password2.focus();
            return false;
        }
        if(password1.value.length != password2.value.length){
            alert("两次密码长度不一致，请重新输入~");
            password1.focus();
            return false;
        }
        return true;
    }
</script>
</body>
</html>